<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>异步加载图片</title>
	<style type="text/css">
		#img{
			width: 80%;
			height: 10%;
		}
	</style>
</head>
<body>
	<img src="https://img.mukewang.com/5e6af63d00011da318720764.jpg" id="img">

	<script type="text/javascript">
		//异步加载图片
		const loadImgAsync=url=>{
			return new Promise((resolve,reject)=>{
				const img=new Image();

				img.onload=()=>{
					resolve(img);
				};

				img.onerror=()=>{
					reject(new Error(`Could not load image at ${url}`));
				};

				img.src=url;
			});
		};

		const imgDOM=document.getElementById('img');
		loadImgAsync('http://climg.mukewang.com/5b165603000146ca06000338.jpg').then(img=>{
			console.log(img.src);
			setTimeout(()=>{
				imgDOM.src=img.src;
			},1000);
		}).catch(err=>{
			console.log(err)
		});
	</script>
</body>
</html>